<template>
  <div class="container">
    <div class="app-container">
      <div class="editForm">
        <el-form ref="detailFormRef" label-width="220px" :model="formData" :rules="formRules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="username">
                <el-input v-model="formData.username" size="small" class="inputW"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="工号">
                <el-input v-model="formData.workNumber" size="small" disabled="true" class="inputW"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="formData.mobile" size="small" :disabled="route.params.id" class="inputW"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门" prop="departmentId">
                <!-- 放置部门级联组件 -->
                <cascader-tree v-model="formData.departmentId" @input="input"></cascader-tree>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="聘用形式" prop="formOfEmployment">
                <!-- 下拉选择器 -->
                <el-select v-model="formData.formOfEmployment" placeholder="请选择" size="small" class="inputW">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="入职时间" prop="timeOfEntry">
                <!-- 日期组件 -->
                <el-date-picker style="width: 310px" format="YYYY/MM/DD" value-format="YYYY-MM-DD" v-model="formData.timeOfEntry" type="date" placeholder="选择一个日期" size="small" clearable class="inputW" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="转正时间" prop="correctionTime">
                <!-- 日期组件 -->
                <el-date-picker style="width: 310px" format="YYYY/MM/DD" value-format="YYYY-MM-DD" v-model="formData.correctionTime" type="date" placeholder="选择一个日期" size="small" clearable class="inputW" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="员工头像">
                <!-- 放置上传图片 -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="center">
            <el-col :span="12">
              <el-button type="primary" @click="saveData">保存更新</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Interface } from "readline";
import type { IEmpoloyeeForm } from "@types";
import cascaderTree from "./components/cascader-tree.vue";
import { useEmployeeStore } from "@/store/modules/employee/index.ts";
import { useRoute, useRouter } from "vue-router";
import { newEmployeeApi, editEmployeeApi, getEmployeeDetailApi } from "@/api/employee";
const router = useRouter();
const route = useRoute();
onMounted(() => {
  if (route.params.id) {
    getEmployeeDetailData();
  }
});
// 定义表单数据
const formData = ref<IEmpoloyeeForm>({
  username: "", // 员工姓名
  workNumber: "", //员工工号
  mobile: "", // 手机号
  departmentId: null, // 员工部门id
  formOfEmployment: "", // 员工聘用形式
  timeOfEntry: "", // 员工入职日期
  correctionTime: "", // 员工转正日期
  staffPhoto: "", // 头像
});

const formRules: FormRules = {
  username: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    {
      min: 1,
      max: 6,
      message: "姓名为1-4位",
    },
  ],
  mobile: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      //   pattern 正则表达式
      pattern: /^1[3-9]\d{9}$/,
      message: "手机号格式不正确",
      trigger: "blur",
    },
  ],
  formOfEmployment: [{ required: true, message: "请选择聘用形式", trigger: "blur" }],
  departmentId: [{ required: true, message: "请选择部门", trigger: "blur" }],
  timeOfEntry: [{ required: true, message: "请选择入职时间", trigger: "blur" }],
  // 转正时间-必填-不能小于入职时间-校验规则-转正时间不能小于入职时间
  correctionTime: [
    { required: true, message: "请选择转正时间", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (formData.value.timeOfEntry) {
          if (new Date(formData.value.timeOfEntry) > new Date(value)) {
            callback(new Error("转正时间不能小于入职时间"));
            return;
          }
        }
        callback();
      },
    },
  ],
};

//转正时间-必填-不能小于入职时间-校验规则-转正时间不能小于入职时间
// {
//       validator: (rule, value, callback) => {
//         if (!value || new Date(value).getTime() < new Date(formData.timeOfEntry).getTime()) {
//           callback(new Error("转正时间不能小于入职时间"));
//         } else {
//           callback();
//         }
//       },
//       trigger: "change",
//     },

// 聘用形式下拉选择器选项数据
const options = [
  {
    value: "1",
    label: "正式",
  },
  {
    value: "2",
    label: "非正式",
  },
];

const EmployeeStore = useEmployeeStore();
// 输入框输入事件处理函数
//用这个id值去更新表单数据中的departmentId字段
const input = (val: string) => {
  // formData.value.departmentId = val;
  // console.log(formData.value.departmentId, "部门id");
  return null;
};
// 表单引用
const detailFormRef = ref<FormInstance>();
const saveData = () => {
  console.log(formData.value, "表单数据");
  // 表单验证
  detailFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      // 如果是编辑状态，则执行更新操作
      if (route.params.id) {
        await editEmployeeApi(formData.value);
        // 保存成功后，返回上一页页面，并刷新页面数据
        router.push("/main/employee");
        ElMessage.success("更新员工数据成功");

        return;
      }
      // 表单验证通过，执行保存操作
      await EmployeeStore.newEmployeeAction(formData.value);
      // await newEmployeeApi(formData.value);
      // 保存成功后，返回上一页页面，并刷新页面数据
      router.push("/main/employee");
    } else {
      console.log("表单验证失败");
    }
  });

  // EmployeeStore.newEmployeeAction(formData.value);
  // console.log("保存数据", formData.value);
};
// 获取员工详情数据
const getEmployeeDetailData = async () => {
  const res = await getEmployeeDetailApi(route.params.id);
  formData.value = res;
};
</script>

<style lang="scss" scoped>
.inputW {
  width: 310px;
}
</style>
